<template>
  <div>
    <br />
    <Table border :loading="loading" stripe :columns="columns1" :data="myBooks">
      <template slot-scope="{ row, index }" slot="action">
        <div>
          <Button @click="openBookDetails(row)">查看详情</Button>
          <Button style="margin-left: 20px;" @click="handleDelete(row, index)">删除</Button>
        </div>
      </template>
    </Table>
    <br />
    <!-- <Page :total="tasks.length" show-sizer show-elevator/> -->
    <BookDetails :setVisiable="(v) => {this.detailsShow = v}" :isShow="detailsShow" :bookId="detailsId" />
  </div>
</template>

<script>
import { findAllBookInMyMyBookShelf, deleteBookFromMyBookShelf } from '../api/bookShelf'
import BookDetails from './BookDetails'

export default {
  name: 'BookShelf',

  components: {
    BookDetails
  },

  data () {
    return {
      detailsShow: false,
      detailsId: '',
      myBooks: [],
      columns1: [
        {
          title: '书名',
          key: 'bookName'
        },
        {
          title: '作者',
          key: 'bookAuthor'
        },
        {
          title: '添加时间',
          key: 'createTime'
        },
        {
          title: 'Action',
          key: 'action',
          slot: 'action'
        }
      ],
      loading: false
    }
  },

  mounted () {
    this.fetchAllBooks()
  },

  methods: {
    async fetchAllBooks () {
      this.loading = true
      const res = await findAllBookInMyMyBookShelf()
      this.myBooks = res.data
      this.loading = false
    },

    async openBookDetails (row) {
      this.detailsId = row.bookId
      this.detailsShow = true
    },

    async handleDelete (row) {
      deleteBookFromMyBookShelf(row._id)
        .then(res => {
          this.$Notice.success({
            title: '删除成功!',
            desc: `${res.data.bookName} 删除成功!`,
            duration: 5
          })
        })
        .catch(err => {
          this.$Notice.error({
            title: '删除失败',
            desc: err.response.data.message,
            duration: 5
          })
        })
        .finally(() => {
          this.fetchAllBooks()
        })
    }
  }
}
</script>

<style scoped>
</style>
